<!-- 会员详情页面 -->
<template>
  <div class=''>
    <!-- <el-card> -->
    <el-row :gutter="0">
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-row type="flex"
                  style="padding: 20px 20px 0 20px; height:180px">
            <img :src="dataForm.member.avatar || url"
                 @error="imgErrorHandle"
                 style="width:150px; height: 150px; margin: 10px auto; border: 1px solid #ccc; border-radius: 150px;">
          </el-row>
          <el-row style="text-align: center">
            <p style="margin: 15px 2px; ">{{dataForm.member.telphone}}</p>
            <el-tag effect="dark"
                    type="warning">
              黄金会员
            </el-tag>
          </el-row>
        </div>
      </el-col>
      <el-col :span="19">
        <div>
          <table>
            <tr>
              <td>姓名</td>
              <td>{{dataForm.member.name}} ({{dataForm.member.sex == 1 ? '男':'女'}})</td>
              <td>地区</td>
              <td>{{dataForm.member.provincename + '/' + dataForm.member.cityname + '/' + dataForm.member.areaname}}</td>
            </tr>
            <tr>
              <td>年龄</td>
              <td>{{dataForm.member.age}}</td>
              <td>身份证号</td>
              <td>{{dataForm.member.idcard}}</td>
            </tr>
            <tr>
              <td>出生日期</td>
              <td>{{dataForm.member.birthday | formatDate('yyyy-MM-dd')}}</td>
              <td>联系电话</td>
              <td>{{dataForm.member.telphone}}</td>
            </tr>
            <tr>
              <td>籍贯</td>
              <td>
                <!--{{findObj(selectOps.hometown, dataForm.member.hometown)}}-->
                {{dataForm.member.hometownVal}}
              </td>
              <td>兴趣爱好</td>
              <td>{{dataForm.member.hobby}}</td>
            </tr>
            <tr>
              <td>学历</td>
              <td>{{findObj(selectOps.education, dataForm.member.education)}}</td>
              <td>职业</td>
              <td>{{dataForm.member.job}}</td>
            </tr>
            <tr>
              <td>健康状况</td>
              <td>{{dataForm.member.health}}</td>
              <td>有无保险</td>
              <td>{{findObj(selectOps.insurance, dataForm.member.insurance)}}</td>
            </tr>
            <tr>
              <td>婚姻状况</td>
              <td>{{findObj(selectOps.marriage, dataForm.member.marriage)}}</td>
              <td>居住情况</td>
              <td>{{findObj(selectOps.reside, dataForm.member.reside)}}</td>
            </tr>
            <tr>
              <td>居住地址</td>
              <td colspan="3">{{dataForm.member.address}}</td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
    <!-- </el-card> -->
    <!-- <el-card style="margin-top: 10px;"> -->
    <h3><i class="el-icon-s-flag"></i> 会员卡信息</h3>
    <table style="border-left: 1px solid #e5e9f2;">
      <tr>
        <td>会员卡号</td>
        <td>{{dataForm.card && dataForm.card.cardNumber}}</td>
        <td>会员类型</td>
        <td>{{dataForm.card && dataForm.card.cardTypeName}}</td>
      </tr>
      <tr>
        <!-- <td>办理方式</td>
        <td>{{dataForm.card && dataForm.card.method}}</td> -->
        <td>可用次数</td>
        <td>{{dataForm.card && dataForm.card.usage}}次</td>
        <td>过期时间</td>
        <td>
          <template v-if="dataForm.card">
            {{dataForm.card.expDate | formatDate('yyyy-MM-dd hh:mm:ss')}}
          </template>
          <template v-else>-</template>
        </td>
      </tr>
      <tr>
        <!-- <td>可用次数</td>
        <td>{{dataForm.card && dataForm.card.usage}}次</td> -->
        <td>可用余额</td>
        <td>
          <!--￥{{dataForm.card && dataForm.card.balance}}-->此功能暂未开通
        </td>
        <td>推荐人</td>
        <td>
          <template v-if="dataForm.card">
            {{dataForm.card.referrer || '-'}}
          </template>
          <template v-else>-</template>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td>
          <template v-if="dataForm.remark">
            {{dataForm.card.remark}}
          </template>
          <template v-else>-</template>
        </td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <!-- </el-card> -->
    <!-- <el-card style="margin-top: 10px"> -->
    <h3><i class="el-icon-s-flag"></i> 充值记录</h3>
    <el-table border
              :data="dataForm.renew">
      <el-table-column label="充值时间"
                       prop="createdTime"
                       header-align="center"
                       align="center">
        <template slot-scope="scope">
          {{scope.row.createdTime | formatDate('yyyy-MM-dd hh:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column label="可用次数"
                       prop="usage"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column label="操作人"
                       prop="createdBy"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column label="备注"
                       prop="remark"></el-table-column>
    </el-table>
    <h3><i class="el-icon-s-flag"></i> 考勤记录</h3>
    <el-table border
              :data="dataForm.attendance">
      <el-table-column label="考勤时间"
                       prop="createdTime"
                       header-align="center"
                       align="center">
        <template slot-scope="scope">
          {{scope.row.createdTime | formatDate('yyyy-MM-dd hh:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column label="操作人"
                       prop="createdBy"
                       header-align="center"
                       align="center"></el-table-column>
    </el-table>
    <h3><i class="el-icon-s-flag"></i> 推荐记录</h3>
    <el-table border
              :data="dataForm.referrer">
      <el-table-column label="姓名"
                       prop="member.name"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column label="会员卡号"
                       prop="cardNumber"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column label="卡类型"
                       prop="cardTypeName"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column label="办卡时间"
                       prop="cardTypeName"
                       header-align="center"
                       align="center">
        <template slot-scope="scope">
          {{scope.row.createdTime | formatDate('yyyy-MM-dd hh:mm:ss')}}
        </template>
      </el-table-column>

      <el-table-column label="操作人"
                       prop="createdBy"
                       header-align="center"
                       align="center"></el-table-column>
    </el-table>
    <!-- </el-card> -->
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { formatDate } from '@/utils/date'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  filters: {
    formatDate (time, format = 'yyyy-MM-dd') {
      var date = new Date(time * 1000)
      return formatDate(date, format)
    }
  },
  data () {
    // 这里存放数据
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      memberId: '',
      dataForm: {
        member: '',
        card: '',
        renew: [],
        attendance: [],
        referrer: []
      },
      selectOps: {
        sex: [
          { id: 1, name: '男' },
          { id: 0, name: '女' }
        ],
        // 学历
        education: [
          { id: 1, name: '文盲' },
          { id: 2, name: '小学' },
          { id: 3, name: '初中' },
          { id: 4, name: '高中/技校/中专' },
          { id: 5, name: '大学专科以上' },
          { id: 6, name: '不详' }
        ],
        // 有无保险
        insurance: [
          { id: 1, name: '有' },
          { id: 0, name: '无' }
        ],
        // 婚姻状况
        marriage: [
          { id: 1, name: '未婚' },
          { id: 2, name: '已婚' },
          { id: 3, name: '丧偶' },
          { id: 4, name: '离婚' },
          { id: 5, name: '未知' }
        ],
        // 居住情况
        reside: [
          { id: 1, name: '独居' },
          { id: 2, name: '与子女居住' },
          { id: 3, name: '夫妻同居' },
          { id: 4, name: '不详' }
        ],
        // 籍贯
        hometown: [
          { id: 1, name: '汉族' },
          { id: 2, name: '少数民族' }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    formatDate (time, format = 'yyyy-MM-dd') {
      var date = new Date(time * 1000)
      return formatDate(date, format)
    },
    init () {
      this.memberId = this.$route.params.id
      // console.log(`id=${this.memberId}`)
      this.$http({
        url: this.$http.adornUrl(`/member/member/detail/${this.memberId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data.code === 0) {
          // console.log(data)
          this.dataForm.member = data.data.member
          this.dataForm.card = data.data.card[0]
          this.dataForm.renew = data.data.renew
          this.dataForm.attendance = data.data.attendance
          this.dataForm.referrer = data.data.referrer
        }
      })
    },
    findObj (obj, param) {
      // selectOps.marriage.find((item) => {return item.id === dataForm.member.marriage})
      let res = obj.find((item) => { return item.id === param })
      if (res) {
        return res['name']
      } else {
        return ''
      }
    },
    imgErrorHandle () {
      this.dataForm.member.avatar = ''
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // console.log('created=' + this.$route.params.id)
    this.init()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // console.log('mounted=' + this.$route.params.id)
  },
  beforeCreate () {
    // console.log('beforeCreate=' + this.$route.params.id)
  }, // 生命周期 - 创建之前
  beforeMount () {
    // console.log('beforeMount=' + this.$route.params.id)
  }, // 生命周期 - 挂载之前
  beforeUpdate () {
    // console.log('beforeUpdate=' + this.$route.params.id)
  }, // 生命周期 - 更新之前
  updated () {
    // console.log('updated=' + this.$route.params.id)
    // this.init()
  }, // 生命周期 - 更新之后
  beforeDestroy () {
    // console.log('beforeDestroy=' + this.$route.params.id)
  }, // 生命周期 - 销毁之前
  destroyed () {
    // console.log('destroyed=' + this.$route.params.id)
  }, // 生命周期 - 销毁完成
  activated () {
    // console.log('activated=' + this.$route.params.id)
    // this.init()
    if (!this.$route.params.id) {
      return !1
    }
    if (this.memberId !== this.$route.params.id) {
      this.init()
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.el-col {
  border-radius: 0px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  // background: #d3dce6;
}
.bg-purple-light {
  // background: #e5e9f2;
}
.grid-content {
  border-radius: 0px;
  min-height: 297px;
  border: 1px solid #e5e9f2;
}
.grid-col {
  text-align: right;
}
table {
  width: 100%;
  border-top: 1px solid #e5e9f2;
  // border-left: 1px solid #e5e9f2;
  border-spacing: 0; /*去掉单元格间隙*/
}

table td {
  padding: 10px 15px;
  border-bottom: 1px solid #e5e9f2;
  border-right: 1px solid #e5e9f2;
}

table td:nth-child(1),
table td:nth-child(3),
table td:nth-child(5) {
  text-align: right;
  width: 13%;
  padding: 10px 10px;
  background: #f9fafc;
}

h3 {
  font-weight: 400 !important;
  color: #606266;
  font-size: 18px;
}
</style>